<template>
	<view style="background: #eee;">
		<view class="top-wrap">
			<view  class="top-cont" :style="{height:iHeight+'px',background:'url('+root_url+shopInfo.icon+') center center no-repeat',backgroundSize:'200% 200%'}">
				<view class="cont-detail">
					<view class="shop-wrap">
						<text class="iconfont icon-jiarushoucang favorite"></text>
						<image :src="root_url+shopInfo.icon" class="shop-img"></image>
						<text class="title">{{shopInfo.name}}</text>
						<text class="info-text">{{shopInfo.address}}</text>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="top-nav" :class="isFixed ? 'fixed' : ''">
			<view @tap='bindNav(0)'  class="nav-unit" :class="current == 0 ?'on':''">商品 </view>
			<view @tap='bindNav(1)'  class="nav-unit" :class="current == 1 ?'on':''">评论 </view>
			<view @tap='bindNav(2)'  class="nav-unit" :class="current == 2 ?'on':''">商家 </view>
		</view>
		
		<!-- 商品 -->
		<view class="VerticalBox" v-if="current == 0">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 384upx)">
				<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in cateList" :data-id="item.id" :key="index" @tap="TabSelect($event)" :data-index="index">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 384upx)" :scroll-into-view="'main-'+mainCur" @scrolltolower="scrolltolower">
				<view class="item-list" v-for="(item,index) in list" :key="index" :id="'main-'+index">
					
					<view class='goods-img'><image :src='root_url+item.img_url'></image></view>
					<view class='goods-info'>
						<view class='name'>{{item.name}}</view>
						<view class='sale-num'>销量：{{item.sale_quantity}}</view>
						<view class='price-btn'>
							<view class='price'>￥{{item.price}}<text>/份</text></view>
							<view class='goods-btn' @tap='bindOperateCart' :data-gid="item.id" :data-index="index"> <text class="iconfont icon-zengjia2"></text></view>
						</view>
					</view>
				</view>		
	
			</scroll-view>
		</view>
		
		
		<!-- 评论 -->
		<view class='comment-wrap' v-if="current == 1">
		 
			<view v-if="list != ''" class='item' v-for="(item,index) in list" :key="item.id">
				<view class='top'>
				  <view class='top-left'>
					<image :src='item.head_img_url'></image>
					<view class='name-socre'>
					  <view class='name'>{{item.nick_name}}</view>
					  <view class='score'>
							<block v-if="item.score == 5"> 
								<text class="iconfont icon-pingfen"></text>
								<text class="iconfont icon-pingfen"></text>
								<text class="iconfont icon-pingfen"></text>
								<text class="iconfont icon-pingfen"></text>
								<text class="iconfont icon-pingfen"></text>
							</block>
							  <block v-else-if="item.score == 4"> 
								<text class="iconfont icon-pingfen"></text>
								<text class="iconfont icon-pingfen"></text>
								<text class="iconfont icon-pingfen"></text>
								<text class="iconfont icon-pingfen"></text>
							  </block>
						  <block v-else-if="item.score == 3"> 
							<text class="iconfont icon-pingfen"></text>
							<text class="iconfont icon-pingfen"></text>
							<text class="iconfont icon-pingfen"></text>
						  </block>
						  <block v-else-if="item.score == 2"> 
							<text class="iconfont icon-pingfen"></text>
							<text class="iconfont icon-pingfen"></text>
						  </block>
						  <block v-else-if="item.score == 1"> 
							<text class="iconfont icon-pingfen"></text>
						  </block>
					  </view>
					</view>
				  </view>
				  <view class='top-right'>
					  <view class='date'>{{item.add_time}}</view>
				  </view>
				</view>
				<view class='content'>{{item.content}}</view>
				<view v-if="img_list" class='img_list'>
				  <block v-for="(im,index) in item.img_list" :key="im.id" >
					<view><image :src='root_url+im.img_url'></image></view>
				  </block>
				</view>
				<view v-if="item.is_replay == 1" class='respond-wrap'>店铺回复：{{item.replay_content}}</view>
			  </view>
			  <view class="no-commnet">
			  	暂无评论
			  </view>
		</view>
		
		  <!-- 商家 -->
		<view class='shop-detail-wrap' v-if="current == 2">
		   <view class='item'>当前月售：{{shopInfo.current_month_sale}}单</view>
		  <view class='item'>店铺电话：{{shopInfo.phone}}</view>
		  <view class='item'>店铺地址：{{shopInfo.address}}</view>
		  <view class='item'>营业时间：{{shopInfo.before_time_str}}-{{shopInfo.before_time_end}}   {{shopInfo.after_time_str}}-{{shopInfo.after_time_end}}</view>
		  <view class='item'>店铺简介：{{shopInfo.simple_desc}}</view>
		</view>
		
		
		<!-- 购物车清单 -->
		<view @tap='bindCartHidden' v-if="cartList.length > 0 && cartShow == 1" class='cart-list-wrap'>
		  <view class='cart-list'>
			  <view class='clear-title' @tap.stop='bindDeleteCart'><text class="iconfont icon-shanchu"></text>清空购物车</view>
			  
				<view class='item' v-for="(item,index) in cartList" :key="item.id">
				  <view class='name-price'>
					<view class='name'>{{item.name}}</view>
					<view class='price'>￥{{item.price}}</view>
				  </view>
				  <view class='operate-cart-num'>
					<text class="iconfont icon-jiajian1" @tap.stop='bindReduce' :data-gid="item.gid" :data-index="index" :data-count="item.count"></text>
					<text class='num'>{{item.count}}</text>
					<text class='iconfont icon-jiajian' @tap.stop='bindOperateCart' :data-gid="item.gid" :data-index="index" :data-count="item.count"></text>
				  </view>
				</view>
			 
		  </view>
		</view>
		
		<!-- 商品底部 -->
		<view v-if="current == 0" class='cart-bottom'>
		  <view class='cart-left'>
			<view @tap='bindCartShowHidden' class='cart-icon'> <text class="iconfont icon-gouwuche"></text></view>
			<view class='price'>￥{{total_price}}</view>
		  </view>
		  <view v-if="shopInfo.status == 1" @tap='bindAddOrder(shop_id)' class='cart-right'>去结算</view>
		  <view v-else class='cart-right-no'>休息中</view>
		</view>
	</view>
</template>

<script>
	import tools from '@/static/utils/tools.js'
	var userInfo = '';
	export default {
		data() {
			return {
				root_url:this.root_url,
				cartList:[],
				total_num:0,
				total_price:0,
				cartShow:0,//1购物车列表显示 0不显示
				userInfo:'',
				shop_id:0,
				iHeight:150,
				current:0,
				isFixed:false,
				shopInfo:'',
				cateList:'',
				list: [],
				cid:0,
				page:1,
				pageSize:8,
				allPages:0,
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true
			}
		},
		onLoad(options) {
			userInfo = uni.getStorageSync('userInfo');
			this.userInfo = userInfo;
			this.shop_id = options.shop_id;
			this.getShopInfo();
		},
		onReady() {
			let _this = this;
			userInfo = uni.getStorageSync('userInfo');
			var user_id = 4829;//userInfo.id
			tools.httpClient('get','index.php?c=shop&a=getMyCartWithGoods',{shop_id:_this.shop_id,user_id: user_id },(res) => {
				console.log(res,1122233)
				if(res.errorCode == 0){
					_this.cartList = res.data.subList;
					_this.total_num =res.data.total_num,
					_this.total_price = res.data.total_price
				}
				
			});
		},
		
		methods: {
			
			/**
			 * 切换tap
			 */
			bindNav(index){
				this.current = index
				 if (this.current == 0 || this.current == 1){
				  this.page = 1;
				  this.list = [];
				  this.cid  = this.first_cid;
				  this.render();
				}
			},
			
			/**
			 * 切换分类
			 */
			TabSelect(e) {
				console.log(e,5678)
				this.tabCur = e.currentTarget.dataset.index;
				this.mainCur = e.currentTarget.dataset.index;
				this.verticalNavTop = (e.currentTarget.dataset.index - 1) * 50
				
				this.cid = e.currentTarget.dataset.id;
				this.page = 1;
				this.list = [];
				this.render();
			},
			
			//上拉加载
			scrolltolower() {
				if ( this.allPages >= this.page) {
					this.render();
				}else{
					return false;
				}
			},
			
			/**
			 * 获取商家信息及分类
			 */
			getShopInfo(){
				let _this = this;
				uni.showLoading({title: '加载中'});
				tools.httpClient('get','index.php?c=shop&a=getShopInfo',{shop_id:_this.shop_id},(res) => {
			
					uni.hideLoading()
					uni.setNavigationBarTitle({title: res.data.name});
					
					_this.shopInfo = res.data;
					_this.cateList = res.cateList;
					_this.cid = res.cateList[0].id;
					_this.first_cid = res.cateList[0].id;
					
					_this.render();
				});
			},
			
			/**
			 * 添加到购物车
			 */
			bindOperateCart(e){
				let _this = this;
				var user_id = 4829;//userInfo.id
				let cartList = this.cartList;
				let len = cartList.length;
				let list = this.list;
				let gid = e.currentTarget.dataset.gid;
				let index = e.currentTarget.dataset.index;
				let goodsInfo = list[index];//当前商品
				
				var count = 1;
				var flag = -1;
				for(var i=0;i<len;i++){//判断是否在购物车里
				
				  if (cartList[i].gid == gid){
					count = parseInt(cartList[i].count) +1;
					flag = i
				  }
				}
				uni.showLoading({title: '加载中'});
				tools.httpClient('get','index.php?c=shop&a=operateCart',{gid:gid,user_id:user_id,shop_id:_this.shop_id,count:count},(res) => {
					uni.hideLoading()
					 if (res.errorCode == 0) {
						if (flag == -1){//首次加入购物车
							// uni.showLoading({title: '加入购物车成功',duration: 500,icon:'none'});
							  var obj = {
								  count:count,
								  gid:goodsInfo.id,
								  name:goodsInfo.name,
								  price:goodsInfo.price,
							  }
							  cartList.push(obj)
							  var total_num = parseInt(_this.total_num) + 1;
							  var total_price = parseFloat(_this.total_price) + parseFloat(goodsInfo.price);
							  _this.cartList = cartList;
							  _this.total_num = total_num;
							  _this.total_price = total_price.toFixed(2);;
						}else{//增加购物车数量
						  cartList[flag].count = count;
						  var total_num = parseInt(_this.total_num)+1;
						  var total_price = parseFloat(_this.total_price) + parseFloat(cartList[flag].price);
						  _this.cartList = cartList;
						  _this.total_num = total_num;
						  _this.total_price = total_price.toFixed(2);
						}
					  }
					
				});
				
			},
			
			/**
			 * 减购物车数量
			 */
			bindReduce(e){
				let _this = this;
				var user_id = 4829;//userInfo.id
				let cartList = this.cartList;
				let gid = e.currentTarget.dataset.gid;
				let index = e.currentTarget.dataset.index;
				let count = cartList[index].count;
				count = count - 1;
				if(count < 0){
					count = 0
				}
				uni.showLoading({title: '加载中'});
				tools.httpClient('get','index.php?c=shop&a=operateCart',{gid:gid,user_id:user_id,shop_id:_this.shop_id,count:count},(res) => {
					uni.hideLoading()
					if (res.errorCode == 0) {
						if(count > 0){
						  cartList[index].count = count;
						  var total_num = parseInt(_this.total_num) - 1;
						  var total_price = parseFloat(_this.total_price) - parseFloat(cartList[index].price);
						  _this.cartList     = cartList;
						  _this.total_num    =total_num;
						  _this.total_price = total_price;
						}else{
						  
						  var total_num = parseInt(_this.total_num) - 1;
						  var total_price = parseFloat(_this.total_price) - parseFloat(cartList[index].price);
						  cartList.splice(index, 1);
						  _this.cartList     = cartList;
						  _this.total_num    = total_num;
						  _this.total_price  = total_price.toFixed(2);
						}
					}
				})
				
			},
			
			/**
		   * 显示 隐藏 购物车
		   */
		  bindCartShowHidden(){
			var cartShow = Math.abs(this.cartShow - 1);

			this.cartShow = cartShow;
		  },

		  /**
		   * 隐藏 购物车列表
		   */
		  bindCartHidden(){
			this.cartShow=0 ;
		  },
			
			/**
			 * 清空购物车
			 */
			bindDeleteCart(){
				let _this = this;
				var user_id = 4829;//userInfo.id
				let shop_id = this.shop_id;
				uni.showLoading({title: '加载中'});
				tools.httpClient('get','index.php?c=shop&a=deleteCartGoods',{user_id:user_id,shop_id:_this.shop_id},(res) => {
					uni.hideLoading()
					console.log(res,123)
					 if (res.errorCode == 0) {
						_this.cartList     = [];
						_this.total_num     = 0;
						_this.total_price   = 0
					}
				})
			},
			
			/**
			 * 去下单
			 */
			bindAddOrder(shop_id){
				uni.navigateTo({
					url: '../order/confirmOrder/confirmOrder?shop_id='+ shop_id
				})
			},
			
			/**
			 * 分页加载商品数据
			 */
			render(){
				let _this = this;
				uni.showLoading({title: '加载中'});
				uni.request({
					url: _this.root_url + 'index.php?c=shop&a=pagingGoodsComment',
					data: {
					  current:_this.current,
					  shop_id:_this.shop_id,
					  cid: _this.cid,
					  pageIndex: _this.page,
					  pageSize: _this.pageSize,
					},
					method: 'GET',
					success: function (res) {
						console.log(res,123456)
						if(res.data.errorCode == 0){
							
							 var dataList = res.data.data.dataList;
							 var list = _this.list;
							 _this.allPages = res.data.data.pageInfo.all_pages;
							 
							for (var i = 0; i < dataList.length; i++) {
								list.push(dataList[i]);
							}
							_this.list = list;
							_this.page = _this.page+1;
						}
					 
					 
					},
					complete: function () {
					  uni.hideLoading()
					}
				  })
			},
			
			
		}
	}
</script>

<style>

.top-wrap {
  background: #f7f7f7;
  /* position: relative; */
}
.top-wrap .top-cont {
  height: 200px;
  /* margin-bottom: 42px; */
}
.top-wrap .top-cont .cont-detail {
  background: rgba(241, 238, 238, 0.9);
  height: 100%;
  padding-top: 20px;
  box-sizing: border-box;
}
.shop-wrap {
  height: 100%;
  background: #fff;
  width: 95%;
  margin: 0 auto;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 120rpx;
}
.shop-wrap  .favorite{
	position: absolute;
	right: 15px;
	top: 5px;
	color: red;
	font-size: 20px;
}
.shop-wrap .title {
  font-weight: 600;
  font-size: 28rpx;
}
.shop-wrap .info-text {
  color: #999;
  font-size: 24rpx;
}
image.shop-img{
  width: 150rpx;
  height: 150rpx;
  border-radius: 150rpx;
  position: absolute;
  top: -30rpx;
}


.top-nav {
  margin-top: 10px;
  display: flex;
  width: 100%;
  background: #f7f7f7;
  z-index: 100;
  border-bottom: 1px solid #e4e4e4;
}
.top-nav .nav-unit {
  flex: 1;
  text-align: center;
  line-height: 45px;
  border: 1px solid #fff;
  font-size: 13px;
}
.top-nav .on{
  color: red;
}

/* 商品 */
.fixed {
	position: fixed;
	z-index: 99;
}

.VerticalNav.nav {
	width: 200upx;
	white-space: initial;
}

.VerticalNav.nav .cu-item {
	width: 100%;
	text-align: center;
	background-color: #f1f1f1;
	margin: 0;
	border: none;
	height: 50px;
	line-height: 50px;
	position: relative;
}

.VerticalNav.nav .cu-item.cur {
	background-color: #fff;
}

.VerticalNav.nav .cu-item.cur::after {
	content: "";
	width: 8upx;
	height: 30upx;
	border-radius: 10upx 0 0 10upx;
	position: absolute;
	background-color: currentColor;
	top: 0;
	right: 0upx;
	bottom: 0;
	margin: auto;
}

.VerticalBox {
	display: flex;
	padding-bottom: 45px;
}

.VerticalMain {
	background-color: #fff;
	flex: 1;
}
	
.VerticalMain .item-list{
	display: flex;
	padding: 30rpx 30rpx;
}
.VerticalMain .item-list+.item-list{
	border-top: 1px solid #e4e4e4;
}
.item-list .goods-img image{
  width: 70px;
  height: 70px;
  border-radius: 3px;
}
.item-list .goods-info{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}
.item-list .goods-info .name{
  font-weight: 700;
}
.detail .right-nav .item .goods-info .sale-num{
  padding-top: 8px;
  color: #666;
  font-size: 24rpx;
}
.item-list .goods-info .price-btn{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-list .goods-info .price{
  color: red;
  padding-top: 5px;
}
.item-list .goods-info .price text{
  font-size: 24rpx;
}
.item-list .goods-info .goods-btn text{
  font-size: 28px;
}

/* 评价 */
.comment-wrap{
	background: #fff;
}
.comment-wrap .item{
  padding: 10px 12px;
  border-bottom: 1px solid #e4e4e4;
}
.comment-wrap .item .top{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.comment-wrap .item .top .top-left{
  display: flex;
  align-items: center;
}

.comment-wrap .item .top .top-left image{
  width: 80rpx;
  height: 80rpx;
  border-radius: 80rpx;
  margin-right: 10px;
}
.comment-wrap .item .top .top-left .name-socre{
  display: flex;
  flex-direction: column;
}
.comment-wrap .item .top .top-left .name-socre .score text{
  color: red;
}

.comment-wrap .item .top .top-right text{
  color: #05BE01;
}
.comment-wrap .item .content{
  padding: 10px 0;
}
.comment-wrap .item .img_list{
  display: flex;
  flex-wrap: wrap;
  padding: 6px 0;
}
.comment-wrap .item .img_list view{
  width: 25%;
}
.comment-wrap .item .img_list view + view{
  padding-left: 10px;
}
.comment-wrap .item .img_list view image{
  width: 100%;
  height: 120rpx;
}
.comment-wrap .item .respond-wrap{
  font-size: 24rpx;
  background: #eee;
  padding: 5px 8px;
  border-radius: 5px;
}
.no-commnet{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0;
	color: #666;
}
/* 商家 */
.shop-detail-wrap{
	background: #fff;
}
.shop-detail-wrap .item{
  display: flex;
  padding: 12px 10px;
  border-bottom: 1px solid #e4e4e4;
}

/* 购物车 */
.cart-bottom{
  border-top: 1px solid #e4e4e4;
  background: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 45px;
  line-height: 45px;
  z-index: 200;
}
.cart-bottom .cart-left{
  position: relative;
  padding-left: 10px;
}
.cart-bottom .cart-left .cart-icon{
  position: absolute;
  background: red;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 40px;
  color: #fff;
  top:-12px;
}
.cart-bottom .cart-left .cart-icon text{
   font-size: 56rpx;
}
.cart-bottom .cart-left .price{
  padding-left: 50px;
  color: red;
  font-size: 18px;
}
.cart-bottom .cart-right{
  background: red;
  color: #fff;
  font-size: 18px;
  padding: 0 20px;
  height: 100%;
  line-height: 45px;
}
.cart-bottom  .cart-right-no{
  background: #999;
  color: #fff;
  font-size: 18px;
  padding: 0 20px;
  height: 100%;
  line-height: 45px;
}
/* 购物车清单 */
.cart-list-wrap{
  z-index:100;
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5)
}
.cart-list{
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 45px;
  border-top: 1px solid #e4e4e4;
  z-index: 101;
}
.cart-list .clear-title{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 12px;
  color: red;
}
.cart-list .clear-title text{
  display: inline-block;
  padding-right: 5px;
}
.cart-list .item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid #e4e4e4;
}
.cart-list .item .name-price{
  display: flex;
}
.cart-list .item .name-price .name{
  width: 100px;
  display: -webkit-box;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
   overflow: hidden;
}
.cart-list .item .name-price .price{
  display: inline-block;
  color: red;
  padding-left: 10px;
}
.cart-list .item .operate-cart-num{
  display: flex;
  align-items: center;
}
.cart-list .item .operate-cart-num text{
  display: inline-block;
} 
.cart-list .item .operate-cart-num .num{
  padding: 0 8px;
}
.cart-list .item .operate-cart-num .icon-jiajian1{
  font-size: 22px;
  color: #999;
}
.cart-list .item .operate-cart-num  .icon-jiajian{
  color: red;
  font-size: 22px;
}
</style>

